<template>
  <div >
    <el-button  type="primary" size="mini"  icon="el-icon-arrow-down" style="margin-right:10px;" @click="showDialog">
      选择组织机构
    </el-button>
    <el-input size="mini" style="width:200px;" disabled v-model="showName"></el-input>
    <el-dialog
      :append-to-body="parentDialog"
      title="组织机构"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-tree
        ref="tree"
        :default-expanded-keys="initV"
        :props="props"
        show-checkbox
        :data="data"
        node-key="id"
      ></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="resetChecked">取 消</el-button>
        <el-button size="mini" type="primary" @click="getCheckedNodes">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getList } from "./organ";
export default {
  name: "zzjg",
  props: {
    parentDialog: {
      type: String,
      default: false
    },

    initV: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      showName: "",
      chackedNode: [],
      data: [],
      props: {
        label: "organName",
        children: "children"
      }
    };
  },
  mounted() {

    this.init();
    // if (this.initV.length > 0) {

    // }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
      this.init();
      this.$nextTick(v => {
        console.log(this.$refs);

        this.$refs.tree.setCheckedKeys(this.initV, true);
        this.chackedNode = this.$refs.tree.getCheckedNodes();
        this.showName = "";
        this.chackedNode.forEach(item => {
          this.showName += item.organName + ",";
        });
      });
    },
    init() {
      getList().then(res => {
        console.log(res);
        if (res.retHead.code == "0000000") {
          this.data = res.retBody;
        }
      });
    },
    checkChange() {
      let arr = this.$refs.tree.getCheckedNodes();
      console.log(arr);
      // this.$refs.tree.setCheckedNodes([arr[arr.length-1]])
    },
    resetChecked() {
      this.$nextTick(() => {
        if (this.$refs.tree) {
          this.$refs.tree.setCheckedKeys([]);
        }
        this.chackedNode = [];
        this.$emit("change", this.chackedNode);
      });
      (this.showName = ""), (this.dialogVisible = false);
    },
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes());
      this.chackedNode = this.$refs.tree.getCheckedNodes();
      this.dialogVisible = false;
      this.$emit("change", this.chackedNode);
      this.showName = "";
      this.chackedNode.forEach(item => {
        this.showName += item.organName + ",";
      });
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.btns {
  text-align: right;
}
</style>
